<template>
  <div :class="s['l-wrapper']">
    <div :class="s['l-header']">
      <div :class="s['m-top']">
        <div :class="s['m-top__bd']">
          计时：{{ timeUse | formatTimeUse }}（限时30分）
        </div>
        <div :class="s['m-top__ft']">
          {{ scoreInfo.index + 1 }} / {{ questions.length }}
        </div>
      </div>
    </div>
    <div :class="s['l-content']">
      <div :class="s['m-content']">
        <div :class="s['m-content__border']">
          <div :class="s['m-content__bd']">
            <div :class="s['m-que']">
              <div :class="s['m-que__bd']">
                <div :class="s['m-que__con']">
                  <div :class="s['m-que__scroll']">{{ questions[scoreInfo.index].question }}</div>
                </div>
                <div :class="s['m-que__select']">
                  <van-radio-group v-model="radio" @change="onChangeRadio">
                    <van-cell-group>
                      <van-cell v-for="(item, index) in questions[scoreInfo.index].items" :key="index" :value-class="s['m-que__cell-right']" :title="letters[index] + '. ' + item" clickable @click="radio = index">
                        <van-radio :name="index" />
                      </van-cell>
                    </van-cell-group>
                  </van-radio-group>
                </div>
              </div>
              <div :class="s['m-que__ft']">
                <div :class="scoreInfo.index === 0 ? s['m-que__prev'] + ' ' + s['m-que__prev--disable']: s['m-que__prev']" @click="onClickPrev">上一题</div>
                <div v-if="scoreInfo.index === questions.length - 1" :class="s['m-que__next']" @click="onClickSubmit">提交答案</div>
                <div v-else :class="s['m-que__next']" @click="onClickNext">下一题</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="s['l-pencil']">
      <div :class="s['u-pencil']"></div>
    </div>
  </div>
</template>
<script>
  import localstorage from 'store'
  import { questions } from 'src/data/question'
  import U from 'src/helper'
  import utils from "../utils";
  export default {
    data() {
      return {
        scoreInfo: {
          isUpdate: false,
          startTime: new Date().getTime(),
          answer: {},
          index: 0,
          score: null
        },
        timeUse: 0,
        timer: null,
        letters: ['A', 'B', 'C', 'D'],
        radio: null,
      }
    },
    filters: {
      formatTimeUse: U.formatTimeUse
    },
    computed: {
      questions() {
        return questions
      }
    },
    created() {
      this.init()
    },
    mounted(){
      utils.jsSdkSignatureReady(() => {
        utils.shareWeixin({
          title: "华蓝集团纪念五四运动100周年知识竞答",
          desc: "好礼多多，等你来参与！",
          link: "https://weixin.zhujia100.com/h5/dati-app/index.html",
          imgUrl: "https://weixin.zhujia100.com/h5/dati-app/"+require("src/assets/images/share.jpg")
        });
      });
    },
    methods: {
      onClickPrev() {
        if(this.scoreInfo.index === 0) return
        this.scoreInfo.index -= 1
        this.radio = this.scoreInfo.answer[this.scoreInfo.index]
        localstorage.set('scoreInfo', this.scoreInfo)
      },
      onClickNext() {
        this.$toast.clear()
        if(this.radio === null || this.radio === undefined) {
          this.$toast.fail('请您选择一个答案')
          return
        }
        this.scoreInfo.index += 1
        this.radio = this.scoreInfo.answer[this.scoreInfo.index]
        localstorage.set('scoreInfo', this.scoreInfo)
      },
      onClickSubmit() {
        if(this.radio === null || this.radio === undefined) {
          this.$toast.fail('请您选择一个答案')
          return
        }
        this.submitAnswer()
      },
      // 提交答案
      submitAnswer() {
        clearInterval(this.timer)
        this.scoreInfo.timeUse = this.timeUse
        this.scoreInfo.score = 0
        this.questions.map((item, index) => {
          if(item.answer === this.scoreInfo.answer[index]) {
            this.scoreInfo.score += 2
          }
        })
        localstorage.set('scoreInfo', this.scoreInfo)
        this.$router.push('/result')
      },
      onChangeRadio(name) {
        this.scoreInfo.answer[this.scoreInfo.index] = name
        localstorage.set('scoreInfo', this.scoreInfo)
      },
      init() {
        const currentTime = new Date().getTime()
        const scoreInfoLS = localstorage.get('scoreInfo')
        if(!scoreInfoLS) {
          localstorage.set('scoreInfo', this.scoreInfo)
        }
        else {
          this.scoreInfo = scoreInfoLS
        }
        this.timeUse = currentTime - this.scoreInfo.startTime
        this.timer = setInterval(() => {
          this.timeUse += 1000
          if(this.timeUse / (60 * 1000) >= 30) {
            this.timeUse = 30 * 60 *1000
            this.submitAnswer()
          }
        }, 1000)
      }
    }
  }
</script>
<style module="s" lang="less">
  @import "~less/index.less";
  .l-wrapper {
    overflow: hidden;
  }
  .l-header {
    margin: 0 20px;
  }
  .l-content {
    margin: 0 20px;
    height: 100%;
  }
  .l-pencil {
    position: absolute;
    right: 0;
    top: 75vh;
  }
  .u-pencil {
    .u-pencil();
  }
  .m-top {
    display: flex;
    align-items: center;
    color: #fff;
    height: 10vh;
    &__hd {
      height: 5vh;
      margin-right: 10px;
    }
    &__bd {
      flex: 1;
    }
  }
  .m-content {
    .m-content();
    &__bd {
      height: calc(100vh - 10vh - 50px);
    }
  }
  .m-que {
    /**/
    &__bd {
      height: calc(100vh - 10vh - 120px);
      overflow: auto;
      margin-bottom: 20px;
    }
    &__con {
      background: #f5f5f5;
      padding: 1em;
    }
    &__scroll {
      overflow: auto;
      line-height: 1.5em;
      text-align: justify;
    }
    /* @media screen and (max-width: 320px) {
      &__scroll {
        max-height: 9em;
      }
    } */
    &__cell-right {
      margin-left: 20px;
      flex: 0 1 auto;
    }
    &__ft {
      display: flex;
      padding: 0 10px;
    }
    &__prev, &__next {
      flex: 1;
      .u-main-btn();
      &:active {
        opacity: .8;
      }
    }
    &__prev {
      background: #f90;
      margin-right: 10px;
      &--disable, &--disable:active {
        opacity: .2;
      }
    }
  }
</style>
